<template>
<div class="commonContent">
  <p class="distAlign">
    <span class="title">{{detailData.activityName}}</span>
    <span :class="setStatusColor()" class="statusTagSize">
      <span :class="setStatusBorderColor()">
        {{detailData.statusStr}}
      </span>
    </span>
    <!-- <span :class="setStatusColor()" class="statusTagSize">{{detailData.statusStr}}</span> -->
  </p>
  <van-swipe class="my-swipe mt12" :autoplay="4000" v-if="detailData.coverImage && detailData.coverImage.length > 0">
    <van-swipe-item v-for="(item,index) in detailData.coverImage">
      <div class="imgDiv" :style="{background: 'url(' + setPreviewUrl(item) + ')', backgroundSize:'cover', backgroundPosition: 'center'}"
         @click="handlePreview(item,index)"
      ></div>
      <!-- <van-image width="100%" height="4rem" :src="setPreviewUrl(item)" fit="fill" /> -->
    </van-swipe-item>
  </van-swipe>
  <div class="cardContent mt12">
    <span style="font-weight:bolder">活动内容</span>
    <div class="mb12" v-for="(item,index) in dataList" :class="index == 0 ? 'mt20' : ''">
      <van-row>
        <van-col :span="5">
          <span class="label">{{item.label}}</span>
        </van-col>
        <van-col :span="19" class="itemContent">
          <span v-if="item.type == 'text'">{{detailData[item.field]}}</span>
          <span v-else>{{detailData[item.field1]}}至{{detailData[item.field2]}}</span>
        </van-col>
      </van-row>
    </div>
  </div>
</div>
</template>
<script>
import qs from 'qs';
import { ImagePreview } from 'vant';
export default {
  name: "activitiesDetail",
  data() {
    return {
      detailData: {},
      dataList: [{
        label: '所属阵地',
        field: 'groundName',
        type: 'text'
      }, {
        label: '服务类别',
        field: 'serveCategoryStr',
        type: 'text'
      }, {
        label: '服务对象',
        field: 'serveTargetStr',
        type: 'text'
      }, {
        label: '活动地址',
        field: 'address',
        type: 'text'
      }, {
        label: '活动时间',
        field1: 'startDate',
        field2: 'endDate',
        type: 'range'
      }, {
        label: '负责人',
        field: 'director',
        type: 'text'
      }, {
        label: '联系电话',
        field: 'directorPhone',
        type: 'text'
      }, {
        label: '活动介绍',
        field: 'content',
        type: 'text'
      }]
    }
  },
  created() {
    this.getDetail(this.$route.query.id)
  },
  methods: {
    getDetail(id) {
      let me = this;
      me.$api.getActivityDetail(qs.stringify({
        id: id
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        me.detailData = res;
      }).catch(err => {
        me.$toast(err)
      })
    },
    setPreviewUrl(item) {
      return process.env.VUE_APP_BASE_URL + 'admin/upms/file/download?filename=' + item
    },
    setStatusColor() {
      let className = "";
      if (this.detailData.status == '5') {
        className = "color5"
      } else if (this.detailData.status == '10') {
        className = "color10"
      } else {
        className = "color20"
      }
      return className
    },
    setStatusBorderColor(){
      let className = "";
      if (this.detailData.status == '5') {
        className = "borderColor5"
      } else if (this.detailData.status == '10') {
        className = "borderColor10"
      } else {
        className = "borderColor20"
      }
      return className
    },
    setTagColor() {
      let me = this;
      let color = "";
      if (me.detailData.status = '5') {
        color = "#666666"
      } else if (me.detailData.status = '10') {
        color = "#07c160"
      } else {
        color = "#EB4446"
      }
      return color
    },
    handlePreview(item,index) {
      let arr = JSON.parse(JSON.stringify(this.detailData.coverImage))
      var result = arr.map((item, i) => {
         return process.env.VUE_APP_BASE_URL + 'admin/upms/file/download?filename=' + item + '&type=1'
      });
      ImagePreview({
        images: result,
        startPosition: index
      });
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
